<template>
	<view class="wrap">

			<view v-if="goodsList.length > 0" class="cartGoodsList u-p-b-80">
				<view class="cartGoods u-flex u-p-15" v-for="goods in goodsList" :key="goods.id">
				
					<view class="goodsInfo u-flex u-p-10">
						<view @tap='jump(`/pages/audio/show`,goods.id)'>
							<u-image border-radius="15" width="200rpx" height="200rpx" :src="vuex_user.store +goods.img">
							</u-image>
						</view>
						<view class="goodsBaseInfo u-flex u-row-between u-col-top u-p-10">
							<view class="priceNum" @tap='jump(`/pages/audio/show`,goods.id)'>
								<text class="title u-p-l-10 u-font-28">{{goods.name}}</text>
								<br>

							</view>
							<view class="priceNum u-flex u-row-between">
								<text class="price u-font-29 u-flex-8">含{{goods.audioCount}}个音频</text>
								
								<u-button @tap='jump(`/pages/audio/show`,goods.id)' type="warning" size="mini" >查看音频</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="empty" v-else>
				<u-empty text="目前还没有音频哟" mode="favor"></u-empty>
			</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				pageNum:1,
				totalPage:0
			};
		},
		onLoad() {
			this.getAudio()
		},
		onReachBottom() {
			if(this.pageNum+1 <= this.totalPage){
				this.pageNum = this.pageNum + 1
				this.getAudio()
			}
		},
		methods: {
			// 商品详情跳转
			jump(url, id) {
				this.$u.route({
					url,
					params: {
						id
					}
				})
			},
			// 获取收藏列表内商品
			async getAudio() {
				const params = {
					pageNum:this.pageNum
				}
				const res = await this.$u.api.audioList(params)
				console.log(res)
				this.goodsList =  [...this.goodsList,...res.list]
				// this.goodsList = res.list
				this.totalPage = res.totalPage
				
				
			},
		
			
			

		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		min-height: 80vh;
		.empty {
			height: 80vh;
		}

		.loading {
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.title,
		.price {
			font-weight: 800;
		}

		.price {
			color: #f29100;
			
		}

		.cartGoodsList {
			.cartGoods {
				.goodsInfo {
					width: 100%;
					background-color: rgb(251, 250, 251);

					.goodsBaseInfo {
						width: 100%;
						height: 200rpx;
						flex-direction: column;

						.priceNum {
							width: 100%;

						}
					}
				}
			}
		}

		.bottomFixed {
			position: fixed;
			left: 0;
			right: 0;
			background-color: #fff;
		}

		/*#ifdef H5*/
		.bottomFixed {
			bottom: 100rpx;
		}

		/*#endif*/
		/*#ifdef MP-WEIXIN*/
		.bottomFixed {
			bottom: 0;
			z-index: 99999;
		}

		/*#endif*/

	}
</style>
